<template>
	<view class="container">
		<div class="pageT">
			<image src="../../static/images/img2.jpg" mode="widthFix"></image>
			<div class="items">
				<h3>分销商</h3>
				<p>{{info.agent_num}}</p>
			</div>
			<div class="items">
				<h3>分销商</h3>
				<p>{{info.distributor_num}}</p>
			</div>
			<div class="items">
				<h3>会员</h3>
				<p>{{info.user_num}}</p>
			</div>
		</div>
		<div class="searchTab">
			<!-- <div class="search">
				<div class="picker">
					<picker :range="array">
						<view>{{array[index]}}</view>
					</picker>
					<image src="/static/images/jt.png" mode=""></image>
				</div>
				<div class="box">
					<image src="/static/images/icon2.png" mode=""></image>
					<input type="text" placeholder="请输入" />
				</div>
			</div> -->
			<!-- v-if="userInfo.role==1||userInfo.role==2" -->
			<div class="tab" >
				<div class="items " :class="type==2?'active':''"  @tap="toGetList(2)">
					<p>分销商</p>
				</div>
				<div class="items" :class="type==3?'active':''" @tap="toGetList(3)">
					<p>会员</p>
				</div>
			</div>

		</div>

		<div class="list" :style="'height: calc(100vh - '+height+'rpx)'">
			<scroll-view scroll-y="true"  @scrolltolower="loadMore" style="height: 100%;">
				<div class="items" @click="toLink(item)" v-for="(item,index) in list" :key="index">
					<image :src="item.avatar" mode="aspectFill" class="avatar"></image>
					<div class="r">
						<div class="t">
							<div class="info">
								<p class="name" v-if="type==2">{{item.username}}</p>
								<p class="name" v-else>{{item.nickname}}</p>
								<p class="type" v-if="type==2">
									</image> {{roleTpye[item.role]}}
								</p>
								<p class="type" v-if="type==3">
									</image> {{vipType[item.vip]}}
								</p>
							</div>
							<!-- <p class="desc">--</p> -->
						</div>
						<div class="time">最近消费时间:{{item.create_time}}</div>
					</div>
				</div>
			</scroll-view>
		</div>
	</view>
</template>
<script>
	import {
		request
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				// 角色 1-超管 2-管理员  3-省代  4-经销商
				vipType:[
					'普通会员','白银会员','黄金会员','铂金会员','钻石会员'
				],
				info: {},
				array: ['手机号', '中国', '巴西', '日本'],
				index: 0,
				roleTpye: {
					1: '超管',
					2: '管理员',
					3: '经销商',
					4: '会员'
				},
				page: 1,
				type:2,
				hasMore:true,
				height:400,
				list: [],
				userInfo:{}
			}
		},
		onLoad() {
			if (uni.getStorageSync('userInfo')) {
				this.userInfo = uni.getStorageSync('userInfo');
				this.getInfo();
				this.getList();
			} else {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}

		},
		methods: {
toGetList(type){
	console.log(type)
	this.page=1;
	this.type=type;
	this.hasMore = true
	this.list=[]
	if(type==2){
		this.getList()
	}else{
		this.getList2()
	}
},
			// 管理或者超管
			getList() {
				request({
					url: 'user/agent-list',
					method: 'get',
					data: {
						page: this.page,
						type:this.type
					}
				}).then(res => {
					if (res.status == 200) {
						console.log(res.data)
						if (res.data.list.length >= 20) {
							this.page++
						} else {
							this.hasMore = false
						}
						this.list = [...this.list, ...res.data.list]
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
					}
				}).catch((err) => {
					uni.showToast({
						title: err.message,
						icon: 'none',
						duration: 2000
					});
				})

			},

// 加载更多
			loadMore() {
				console.log(1111)
				if(this.hasMore){
					if (this.userInfo.role == 1 || this.userInfo.role==2) {
						// 
						this.getList()
					}else{
						if(userInfo.role==3){
							this.type=2;
							this.getList()
						}else{
							this.getList2()
						}
					
					}
				}
			},
			getList2() {
				request({
					url: 'user/user-list',
					method: 'get',
					data: {
						page: this.page,
					}
				}).then(res => {
					if (res.status == 200) {
						console.log(res.data)
						if (res.data.list.length >= 20) {
							this.page++
						} else {
							this.hasMore = false
						}
						this.list = [...this.list, ...res.data.list]
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
					}
				}).catch((err) => {
					uni.showToast({
						title: err.message,
						icon: 'none',
						duration: 2000
					});
				})
			
			},
			toLink(item) {
				uni.navigateTo({
					url: '/pages/vipInfo/vipInfo?id='+item.id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			getInfo() {
				request({
					url: 'user/count',
					method: 'get',
				}).then(res => {
					if (res.status == 200) {
						console.log(res.data)
						this.info = res.data

					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
					}
				}).catch((err) => {
					uni.showToast({
						title: err.message,
						icon: 'none',
						duration: 2000
					});
				})
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f2f2f2;
	}

	// 会员账号 会员姓名
	.pageT {
		height: 229rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		padding: 0 70rpx;
		color: #fff;

		image {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
		}

		.items {
			h3 {
				font-size: 29rpx;
				margin-bottom: 25rpx;
			}

			p {
				font-size: 50rpx;
				font-weight: bold;
			}
		}
	}

	.searchTab {
		background-color: #fff;
		box-sizing: border-box;
		padding-top: 45rpx;
		position: relative;
		margin-bottom: 18rpx;

		.search {
			display: flex;
			align-items: center;
			width: 701rpx;
			height: 68rpx;
			border-radius: 34rpx;
			background-color: #f4f4f4;
			margin: 0 auto;

			.picker {
				color: #4e4f4f;
				width: 174rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;

				image {
					width: 30rpx;
					height: 30rpx;
					display: block;
				}
			}

			.box {
				height: 45rpx;
				border-left: 1px solid #d8d8d8;
				padding-left: 20rpx;
				flex: 1;
				box-sizing: border-box;
				display: flex;
				flex: 1;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}

			input {
				width: 100%;
				height: 45rpx;
				font-size: 28rpx;

			}
		}
	}

	.tab {
		width: 100%;
		display: flex;
		box-sizing: border-box;
		padding: 0 30rpx;

		.items {
			width: 50%;
			text-align: center;
			color: #000000;
			font-size: 32rpx;
			display: flex;
			justify-content: center;
			margin-bottom: 30rpx;

			p {
				border-bottom: 4rpx solid transparent;
				padding-bottom: 20rpx;
			}

			&.active {
				p {
					color: #18c2c9;
					border-bottom: 4rpx solid #18c2c9;
				}
			}
		}
	}

	.list {
		.items {
			background-color: #fff;
			width: 714rpx;
			margin: 0 auto;
			border-radius: 10rpx;
			display: flex;
			align-items: flex-start;
			box-sizing: border-box;
			padding: 0 20rpx;
			padding-top: 30rpx;
			margin-bottom: 20rpx;

			.avatar {
				width: 100rpx;
				height: 100rpx;
				display: block;
				border-radius: 100%;
				margin-right: 20rpx;
			}

			.r {
				flex: 1;
				width: 200rpx;

				.t {
					border-bottom: 1px solid #e9e9e9;
					height: 100rpx;
					display: flex;
					flex-direction: column;
				}
			}

			.time {
				color: #8e8b8a;
				font-size: 28rpx;
				height: 75rpx;
				line-height: 75rpx;
			}

			.desc {
				font-size: 28rpx;
				color: #969596;
				margin-top: 5rpx;
			}

			.info {
				display: flex;
				align-items: center;

				.name {
					color: #000;
					font-size: 28rpx;
				}

				.type {
					margin-left: 20rpx;

					image {
						width: 26rpx;
						height: 26rpx;
						display: block;
						margin-right: 5rpx;
					}

					min-width: 128rpx;
					padding: 0 10rpx;
					height: 38rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					line-height: 1;
					border-radius: 16rpx;
					font-size: 24rpx;
					background-color: #c3eff1;
					color: #18c2c9;
				}
			}
		}
	}
</style>